{% extends "kore2columns.html" %}
{% load i18n %}


{% block javascript %}
	<script type="text/javascript" src="{{ MEDIA_URL }}static/js/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="{{ MEDIA_URL }}static/js/jquery-ui-1.8.custom/js/jquery-ui-1.8.custom.min.js"></script>
	<link rel="stylesheet" href="{{ MEDIA_URL }}static/js/jquery-ui-1.8.custom/css/smoothness/jquery-ui-1.8.custom.css" type="text/css"/>
	
	<script type="text/javascript">
		$(document).ready(function() {
		   $( "span.volume" ).each(function() {
				var value = parseFloat($(this).text(), 1);
				$(this).empty().slider({
					value: value,
					range: "min",
					animate: true,
					min: 0,
					max: 1,
					step: 0.01,
					orientation: "vertical",
					slide: function(event, ui) {
						val = $(this).slider('value');
						$(this).next().next()[0].volume = val;
					}
				});
			});
			$( "#timeline" ).slider({
					value: 0,
					min: 0,
					max: 1,
					step: 0.001,
					orientation: "horizontal",
					range: "min",
					animate: true, 
					start: function(event, ui) {
						$('audio').each(function(i){
							$(this)[0].pause()
						})
					},
					stop: function(event, ui){
						var current_time = $(this).slider("option", "value")*parseFloat($('audio').eq(0).attr('duration'))
						$('audio').each(function(i){
							$(this)[0].currentTime = current_time
							$(this)[0].play()
						})
					},
					slide: function(event, ui) {
					}
					
			});
			
			$("#play").click(function(evt) {
				$('audio').each(function(i){
					$(this)[0].play()
				})
			
			})

			$("#pause").click(function(evt) {
				$('audio').each(function(i){
					$(this)[0].pause()
				})
			
			})
			
			$("#stop").click(function(evt) {
				$('audio').each(function(i){
					$(this)[0].pause()
					$(this)[0].currentTime = 0
				})
			})
			
			var current_time
			$('audio').eq(0).bind("timeupdate", function(e) { 
				current_time = parseFloat($(this).attr('currentTime'))
				duration = parseFloat($(this).attr('duration'))
				$( "#timeline" ).slider( "option", "value", current_time/duration );
				$.each($('audio'), function(index, value) { 
					if(Math.abs($(this).attr('currentTime')-current_time) > 0.5){
						$(this)[0].currentTime = current_time
						//console.log('resync', index)
					}
				});
			})
			
			
		});

	</script>

	<!--

	<script type="text/javascript">
	
	Array.prototype.max = function(){
		return Math.max.apply({},this)
	}
	Array.prototype.min = function(){
		return Math.min.apply({},this)
	}
	Array.prototype.dev = function(){
		return Math.max.apply({},this) - Math.min.apply({},this);
	}
	
	$(function() {

		
		$(".mute_button").button({
			
		})
		
		$(".mute_button").click(function() {  
			var tg_slider = "#slider_"+$(this).attr('id').split('_')[1]
			var tg_audio = "#audio_"+$(this).attr('id').split('_')[1]
			if($(this).next().attr('aria-pressed') == 'true'){
				$(tg_slider).slider( "option", "disabled", false)
				$(tg_audio)[0].volume = $(tg_slider).slider('value');;
			}
			else 
			{
				$(tg_slider).slider( "option", "disabled", true)
				$(tg_audio)[0].volume = 0;
			}
		});
	
		
		$("#refresh, #help_resync").button({
			icons: {
                primary: 'ui-icon-refresh'
            },
            text: false
		});		
		
		$("#refresh").click(function(){
			sync_function();	
		})
		
		
		
		
		
		
		sync_function = function(){
			
			var current_times = []
			$.each($('audio'), function(index, value) { 
				current_times.push($(this).attr('currentTime'))
			});	
			var dev = current_times.dev()
			//console.log(dev)
			var min = current_times.min()
			if(dev > 0.01){
				/*
				$.each($('audio'), function(index, value) { 
					//console.log($(this).attr('currentTime'))
					this.pause()
				});	
				*/
				$.each($('audio'), function(index, value) { 
					$(this).attr('currentTime', min)
				});	
				/*
				$.each($('audio'), function(index, value) { 
					this.play()
				});	
				*/
			}			
			
		}
		
		
		
	
		$("#play").button({
			icons: {
                primary: 'ui-icon-play'
            },
            text: false
		});
		
		$("#play").click(function() {
			{% for t in song.track_set.all %}
				$('#audio_{{ t.id }}')[0].play()
			{% endfor %}
		})

		
		$("#pause").button({
			icons: {
                primary: 'ui-icon-pause'
            },
            text: false
		});
		
		$("#pause").click(function() {
			{% for t in song.track_set.all %}
				$('#audio_{{ t.id }}')[0].pause()
			{% endfor %}
		})
		
		$("#stop").button({
			icons: {
                primary: 'ui-icon-stop'
            },
            text: false
		});		
		
		$("#stop").click(function() {
			
			{% for t in song.track_set.all %}
			    
				$('#audio_{{ t.id }}')[0].pause()
				$('#audio_{{ t.id }}')[0].currentTime = 0
				
			{% endfor %}
		})
		
		$(".volume_slider").slider({
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 1,
			step: 0.01,
			value: 0.6,
			change: function(event, ui) { 
				val = $(this).slider('value');
				tg = "#audio_"+$(this).attr('id').split('_')[1];
				$(tg)[0].volume = val;
			},
			slide: function(event, ui) {
				val = $(this).slider('value');
				tg = "#audio_"+$(this).attr('id').split('_')[1];
				$(tg)[0].volume = val;
			}


		});
		
		
		
		
		$.each($('audio'), function(index, value) { 
			$(this).bind('progress', function(e) {
				////console.log($(this).attr('id')+' '+Math.round(e.originalEvent.loaded/e.originalEvent.total*100)+'%')
			})		   
		});

		$('audio').eq(0).bind("timeupdate", function(e) { 
			//sync_function()		
		})
		
		$('audio').eq(0).bind("durationchange", function(e) { 
			//alert($(this).attr('duration'))

			self = this;
			$('#timeline_slider').slider({
			    max: $(self).attr('duration'),
			    start: function(event, ui) { 
			    	$('audio').eq(0).unbind("timeupdate");

			    },
				stop: function(event, ui) { 
					{% for t in song.track_set.all %}
						$('#audio_{{ t.id }}')[0].currentTime = $(this).slider("value")			
					{% endfor %}					
			    	$('audio').eq(0).bind("timeupdate", function(e) {
						$('#timeline_slider').slider("value", $(this).attr('currentTime'));
					});			    					
				}
			})
			
		});
		
		$('audio').eq(0).bind("timeupdate", function(e) {
			$('#timeline_slider').slider("value", $(this).attr('currentTime'))
		});
		
		
		$('audio').attr('volume', '0.6');
		

		
		
	});
	</script>
	-->



{% endblock %}


{% comment %}

{% block css %}
	
{% endblock %}

{% endcomment %}



{% block main-content %}	

	<div class="block ">





	
	<h2 style="text-align:center">remix <i>{{ song.title }}</i></h2>
	<p style="text-align:center" class='subtitle'><i><a href="{% url album-detail song.album.id %}">{{ song.album }}</a></i></p>


<p class="soft">
<a style="color:#777" href="http://www.mozilla-europe.org/fr/firefox/" ><!--<img class="small-sticker" src="{{ MEDIA_URL }}static/img/firefox-icon.png" />-->This application only works with the latest Firefox version. <br />Cette application ne fonctionne qu'avec la dernière version de Firefox.</a>
</p>

	<div>
	{% for track in song.track_set.all %}

	<span style="float:left; width:40px;font-size:0.7em;border-left:1px solid #eee">
		
		<input type="checkbox" id="mute_{{track.id}}" class="mute_button" />
		<label for="mute_{{track.id}}">M</label>
		<br />
		<span style="height:120px; float:left; margin:15px" class="volume">0.5</span>
		<br />
		<audio src="{{ track.url }}" id="audio_{{ track.id }}" ></audio>
		{{ track.title }}
		
		<!--<input type="checkbox" id="solo_{{track.id}}" class="solo_button" /><label for="solo_{{track.id}}">S</label>-->
	</span>	
	{% endfor %}		
	
	</div>
	
	<div style="clear:both"></div>
	
	
	
	
	<div id="timeline" style="font-size:0.7em; width:90%; margin:15px"></div><p>
	<p>	
		<br />
		<span id="stop" class="button red">Stop</span> 
		<span id="pause" class="button magenta">Pause</span> 
		<span id="play" class="button yellow">Play</span> 
		<!--<span id="refresh" class="button blue">Sync</span> 	-->
	</p>
	
	<!--
					<ul>
					<li>Move the mixing table sliders to increase or decrease track volume<br />Déplacer les potentiomètres de la table de mixage pour augmenter ou réduire le volume de chaque piste.</li>
					<li>Click on M to mute the track<br /> Cliquer sur M pour couper la piste.</li>
					<li>Move the controls horizontal slider to seek into the sound<br />Déplacer le curseur horizontal du bloc contrôles pour vous déplacer dans le son.</li>
					
					</ul>

	
	

					<p>  If you hear a displacement between audio files, click on the Sync button.<br />Si vous entendez un décalage entre les fichiers sons, cliquez sur le bouton Sync.</p>

	
	
	{% for track in song.track_set.all %}
		
	{% endfor %}
	
	-->

	
{% endblock %}